<template>
<<<<<<< HEAD
  <div>

    <myheader/>

    <van-cell-group>
<!--      <van-field label='用户名' placeholder='请输入用户名' v-model="username" @blur="user"></van-field>-->
<!--      <van-field label='密码' placeholder='请输入密码' v-model="password" type='password' @blur="paw"></van-field>-->
<!--      <van-field label='确认密码' placeholder='请确认密码' v-model="password1" @blur="contrast" type='password'></van-field>-->

      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          :rules="[
              { required: true, message: '请输入用户名！' },
              { pattern: /^[0-9a-zA-Z]{6,}$/, message: '用户名由数字和英文6位起！'}
            ]"
          type="tel"
          label="用户名"
          placeholder="请输入用户名"
          clearable
        />

        <van-field
          v-model="password"
          :rules="[
              { required: true, message: '请输入密码！' },
              { pattern: /^[0-9a-zA-Z_]{8,}$/, message: '密码由下划线/数字和英文8位起不能出现特殊字符！'}
            ]"
          type="password"
          label="密码"
          placeholder="请输入密码"
          clearable
        />

        <van-field
          v-model="password1"
          :rules="[
              { required: true, message: '请确认密码！' }
            ]"
          type="password"
          label="请确认密码"
          placeholder="请确认密码"
          clearable
        />
          <van-button type="submit">提交</van-button>
      </van-form>

    </van-cell-group>

    <br/><br/>
    总数量:{{ this.nums }}---总价:{{ this.money }}
    <table border="1" width='300px' height='100'>
      <tr>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>商品数量</td>
      </tr>
      <tr v-for="(i,index) in mylist">
        <td>{{ i.text }}</td>
        <td>{{ i.price }}</td>
        <van-button color='red' @click="minus(index)"> - </van-button>
        <td>{{ i.num }}</td>
        <van-button color='blue' @click="add(index)"> + </van-button>

      </tr>
    </table>

    <!-- //直接调用方法进行反转 -->
    {{ reverse_meg() }}

    <van-button color='red' @click="show = !show">点击事件</van-button>

    <ul v-show='show'>
      <li v-for='(item,index) in mylist' :class="{on:index%2==0,off:index%2!=0}">
        {{ index }}:{{ item.text }}
      </li>
    </ul>

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else>
      C
    </div>
    <h1 v-show='ok'>hello</h1>

    {{ meg }}


<!--    //尾部-->
    <myfoot></myfoot>
  </div>
</template>

<script>

//导入其他组件
import myheader from './myheader.vue';
import myfoot from "./myfoot";
import Myfoot from "./myfoot";

export default {
  //声明组件
  components: {
    Myfoot,
    'myheader': myheader
  },
  //声明变量
  data() {
    return {
      username: '',
      password: '',
      password1: '',
      show: true,
      meg: '这是一个字符串',
      ok: 1,
      type: 'C',
      mylist: [
        {text: '汽车', price: 5, num: 6},
        {text: '面包', price: 12, num: 2},
        {text: '鲜花', price: 8, num: 1},
        {text: '花瓣', price: 7, num: 4},
        {text: '滑板', price: 15, num: 2},
        {text: '画板', price: 9, num: 3}
      ],

    }
  },
  //声明方法
  methods: {
    //提交and对比密码
    onSubmit: function () {
      if (this.password != this.password1) {
        alert('两次输入密码不一致')
      }else{
        alert('成功!')
      }
    },
    //反转字符串
    reverse_meg: function () {
      //进行反转逻辑
      return this.meg.split('').reverse().join('');
    },
    //加法逻辑
    add: function (index) {
      //找到指定商品的数量做累加
      this.mylist[index].num++;
    },
    //减法逻辑
    minus: function (index) {
      //判断
      if (this.mylist[index].num > 1) {
        this.mylist[index].num--;
      } else {
        //删除逻辑  把当前商品删除
        this.mylist.splice(index, 1);
      }
    }
  },
  //挂载完成执行
  mounted() {
  },
  // 计算函数
  computed: {
    nums() {
      var i = 0
      this.mylist.forEach(res => {
        i += res.num
      })
      return i
    },
    money() {
      var i = 0
      this.mylist.forEach(res => {
        i += res.num * res.price
      })
      return i
    }
  }


}

</script>

//样式层
<style>

.on {
  background: hsl(187, 100%, 50%);
}

.off {
  background: #f73ff7;
}

</style>
=======
<div>


	<myheader />


<van-cell-group>
	
	<van-field label="用户名" placeholder="请输入用户名" v-model="username"   />




</van-cell-group>



<br /><br />

<table border="1" width="700" height="500">
		
		<tr>
			
			<td>商品名称</td> <td>商品价格</td> <td>商品数量</td>

		</tr>

		<tr v-for="(item,index) in mylist">

			<td>{{ item.text }}</td>

			<td>{{ item.price }}</td>

			<td>

			<van-button color="red" @click="minus(index)"> - </van-button>

			{{ item.num }}

			<van-button color="blue" @click="add(index)"> + </van-button>

			</td>
			
		</tr>


</table>


<br /><br />

{{ reverse_msg() }}


<van-button color="orange" @click=" show = !show " >点击事件</van-button>


<ul v-show="show" >
	
	<li v-for='(item,index) in mylist' :class="{on:index%2==0,off:index%2!=0}"  >
		
	  {{ index }}:{{ item.text }}

	</li>


</ul>



<div v-if="type === 'A'">
	A
</div>

<div v-else-if="type === 'B'">
	B
</div>

<div v-else>
	C
</div>

<h1 v-show="ok">hello</h1>
	
{{ msg }}

</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';


export default{

	//声明组件
	components:{

		'myheader':myheader

	},
	//声明变量
	data(){

		return {

			msg:'这是一个字符串',
			ok:0,
			type:"C",
			mylist:[{text:'汽车',price:10,num:1},{text:'面包',price:5,num:2},{text:'牛奶',price:1,num:10},{text:'鲜花',price:4,num:1}],
			show:true,
			username:""

		}


	},
	//声明方法
	methods:{

		//减法逻辑
		minus:function(index){

			//判断
			if(this.mylist[index].num > 1){

				this.mylist[index].num--;
			}else{

				//删除逻辑
				this.mylist.splice(index,1);

			}


		},
		//加法逻辑
		add:function(index){

			//找到商品数量做累加
			this.mylist[index].num++;



		},

		//反转字符串
		reverse_msg:function(){

				//反转逻辑
				return this.msg.split("").reverse().join("");

		}



	}


}
	


</script>


<style>

.on { background:purple }
.off {background:orange }

</style>
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
